var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "react", "controls/design-view", "services/page-datas", "services/local-service", "components/menu/component", "maishu-chitu", "maishu-ui-toolkit", "controls/item-dialog", "common"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const React = require("react");
    const design_view_1 = require("controls/design-view");
    const page_datas_1 = require("services/page-datas");
    const local_service_1 = require("services/local-service");
    const component_1 = require("components/menu/component");
    const maishu_chitu_1 = require("maishu-chitu");
    const ui = require("maishu-ui-toolkit");
    const item_dialog_1 = require("controls/item-dialog");
    const common_1 = require("common");
    class StoreMenuPage extends React.Component {
        // isAsyncMenuAndMenuNodeList: boolean = false;
        constructor(props) {
            super(props);
            this.menuState = new maishu_chitu_1.ValueStore();
            this.state = { showIcon: false };
            this.localService = this.props.createService(local_service_1.LocalService);
        }
        loadData() {
            return __awaiter(this, void 0, void 0, function* () {
                let pageDataRecord = yield page_datas_1.pageDatas.menu();
                console.assert(pageDataRecord != null);
                let menuComponentData = page_datas_1.findChildComponentData(pageDataRecord.pageData, component_1.Menu.name);
                console.assert(menuComponentData != null);
                let menuProps = menuComponentData.props;
                let menuRef = menuProps.ref;
                menuProps.ref = (menu) => {
                    if (!menu || this.menu)
                        return;
                    if (typeof menuRef == "function")
                        menuRef(menu);
                    this.menu = menu;
                    this.asyncMenuAndMenuNodeList();
                };
                return { pageData: pageDataRecord };
            });
        }
        asyncMenuAndMenuNodeList() {
            // if (this.isAsyncMenuAndMenuNodeList)
            //     return;
            if (this.menu == null || this.menuNodeList == null)
                return;
            // this.isAsyncMenuAndMenuNodeList = true;
            common_1.asyncComponentState(this.menu, this.menuNodeList, "menuNodes");
            common_1.asyncComponentState(this.menu, this, "showIcon");
        }
        componentDidMount() {
            return __awaiter(this, void 0, void 0, function* () {
                let { pageData: pageDataRecord } = yield this.loadData();
                this.setState({ pageDataRecord });
            });
        }
        render() {
            let { pageDataRecord, showIcon } = this.state;
            showIcon = showIcon == null ? component_1.defaultShowIcon : showIcon;
            if (pageDataRecord == null) {
                return React.createElement("div", { className: "empty" }, "\u6570\u636E\u6B63\u5728\u52A0\u8F7D\u4E2D...");
            }
            return React.createElement(design_view_1.DesignView, Object.assign({ ref: e => this.designPage = e || this.designPage }, this.props, { pageDataRecord: pageDataRecord, hideEditorPanel: true, hideToolbar: true, hidePageSettingPanel: true }),
                React.createElement("div", { className: "menuEditor" },
                    React.createElement("div", { className: "menu-apply" },
                        React.createElement("div", { className: "pull-left" },
                            React.createElement("label", { className: "pull-right" },
                                React.createElement("input", { type: "checkbox", className: "ace ace-switch ace-switch-5", checked: showIcon, onChange: (e) => {
                                        this.setState({ showIcon: e.target.checked });
                                    } }),
                                React.createElement("span", { className: "lbl middle" })),
                            React.createElement("div", { className: "pull-right", style: { padding: '4px 10px 0 0' } }, "\u83DC\u5355\u9879\u663E\u793A\u56FE\u6807")),
                        React.createElement("div", { className: "clear-fix" })),
                    React.createElement(MenuNodeList, Object.assign({ ref: e => {
                            if (!e)
                                return;
                            this.menuNodeList = e;
                            this.asyncMenuAndMenuNodeList();
                        } }, { showIcon }))));
        }
    }
    exports.default = StoreMenuPage;
    let links = [
        { text: '请选择链接', url: '' },
        { text: '店铺主页', url: '#home_index' },
        { text: '购物车', url: '#shopping_shoppingCart' },
        { text: '会员主页', url: '#user_index' },
        { text: '商品类别', url: '#home_class' }
    ];
    let icons = [
        "icon-home", "icon-shopping-cart", "icon-user", "icon-comment",
        "icon-rss", "icon-truck", "icon-reorder", "icon-calendar",
        "icon-th-large"
    ];
    class MenuNodeList extends React.Component {
        constructor(props) {
            super(props);
            this.state = { menuNodes: [] };
        }
        newItem() {
            this.menuNodeDialog.show({}, "添加菜单项", (item) => {
                let { menuNodes } = this.state;
                menuNodes.push(item);
                this.setState({ menuNodes });
            });
        }
        editItem(item) {
            this.menuNodeDialog.show(item, "编辑菜单项", () => {
                let { menuNodes } = this.state;
                this.setState({ menuNodes });
            });
        }
        deleteItem(menuItem) {
            return __awaiter(this, void 0, void 0, function* () {
                let menuNodes = this.state.menuNodes.filter(o => o != menuItem);
                this.setState({ menuNodes });
            });
        }
        linkName(url) {
            let link = links.filter(o => o.url == url)[0];
            return link ? link.text : '';
        }
        render() {
            let { menuNodes } = this.state;
            menuNodes = menuNodes || [];
            menuNodes.sort((a, b) => {
                return (a.sortNumber || 0) - (b.sortNumber || 0);
            });
            return React.createElement(React.Fragment, null,
                React.createElement("ul", { className: "menu" },
                    menuNodes.map((o, i) => React.createElement("li", { key: i, style: { display: "flow-root" } },
                        React.createElement("div", { className: "pull-left", style: { width: 60 } }, o.sortNumber),
                        React.createElement("div", { className: "pull-left", style: { width: 100 } }, o.name),
                        React.createElement("div", { className: "pull-left" },
                            o.url,
                            " ",
                            this.linkName(o.url) ? `(${this.linkName(o.url)})` : ''),
                        React.createElement("div", { className: "pull-right" },
                            React.createElement("button", { className: "btn btn-danger btn-sm pull-right", style: { marginLeft: 4 }, ref: (e) => {
                                    if (!e)
                                        return;
                                    e.onclick = ui.buttonOnClick(() => this.deleteItem(o), { confirm: `确定要删除菜单项 "${o.name}" 吗?` });
                                } },
                                React.createElement("i", { className: "icon-remove" }),
                                React.createElement("span", { style: { paddingLeft: 4 } }, "\u5220\u9664")),
                            React.createElement("button", { className: "btn btn-info btn-sm pull-right", ref: (e) => {
                                    if (!e)
                                        return;
                                    e.onclick = () => this.editItem(o);
                                } },
                                React.createElement("i", { className: "icon-pencil" }),
                                React.createElement("span", { style: { paddingLeft: 4 } }, "\u4FEE\u6539"))))),
                    React.createElement("li", null,
                        React.createElement("button", { className: "btn btn-primary", onClick: () => {
                                this.newItem();
                            } },
                            React.createElement("i", { className: "icon-plus" }),
                            React.createElement("span", null, "\u70B9\u51FB\u6DFB\u52A0\u83DC\u5355\u9879")))),
                React.createElement(MenuNodeDialog, Object.assign({}, { showIcon: this.props.showIcon, ref: (e) => this.menuNodeDialog = e || this.menuNodeDialog })));
        }
    }
    class MenuNodeDialog extends item_dialog_1.ItemDialog {
        isCustomUrl() {
            if (this.state.item == null)
                return false;
            let currentUrl = this.state.item.url || "";
            let containsUrl = links.map(o => o.url).indexOf(currentUrl) >= 0;
            return !(containsUrl);
        }
        toggleIconsPanel() {
            this.iconsElement.style.display ?
                this.iconsElement.style.removeProperty('display') :
                this.iconsElement.style.display = 'none';
        }
        render() {
            let { showIcon } = this.props;
            let { item: currentItem } = this.state || {};
            return React.createElement(React.Fragment, null,
                React.createElement("div", { className: "form-horizontal" },
                    React.createElement("div", { className: "form-group" },
                        React.createElement("label", { className: "col-sm-2 control-label" }, "\u540D\u79F0*"),
                        React.createElement("div", { className: "col-sm-10" },
                            React.createElement("input", { name: "name", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u9879\u540D\u79F0", value: currentItem.name || "", onChange: e => {
                                    currentItem.name = e.target.value;
                                    this.setState({ item: currentItem });
                                } }))),
                    React.createElement("div", { className: "form-group" },
                        React.createElement("label", { className: "col-sm-2 control-label" }, "\u5E8F\u53F7"),
                        React.createElement("div", { className: "col-sm-10" },
                            React.createElement("input", { name: "sortNumber", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u9879\u5E8F\u53F7", value: currentItem.sortNumber || "", onChange: e => {
                                    currentItem.sortNumber = Number.parseInt(e.target.value);
                                    this.setState({ item: currentItem });
                                } }))),
                    showIcon ?
                        React.createElement("div", { className: "form-group" },
                            React.createElement("label", { className: "col-sm-2 control-label" }, "\u56FE\u6807"),
                            React.createElement("div", { className: "col-sm-10" },
                                React.createElement("div", { className: "input-group" },
                                    React.createElement("input", { name: "icon", type: "text", className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u9879\u56FE\u6807", value: currentItem.icon || "", onChange: e => {
                                            currentItem.icon = e.target.value;
                                            this.setState({ item: currentItem });
                                        } }),
                                    React.createElement("div", { className: "input-group-addon", onClick: () => this.toggleIconsPanel() },
                                        React.createElement("i", { className: "icon-cog", style: { cursor: 'pointer' } })),
                                    React.createElement("div", { ref: (e) => this.iconsElement = e || this.iconsElement, style: {
                                            position: 'absolute', height: 100, width: '100%', background: 'white',
                                            zIndex: 10, left: 0, top: 35, border: 'solid 1px #ccc', overflowY: 'auto',
                                            display: 'none'
                                        } },
                                        React.createElement("div", { style: { position: 'absolute', width: '100%', borderBottom: 'solid 1px #ccc', padding: '4px 6px', background: 'white' } },
                                            React.createElement("span", null, "\u8BF7\u9009\u62E9\u56FE\u6807"),
                                            React.createElement("i", { className: "icon-remove", style: { position: 'absolute', right: 6, top: 6 }, onClick: () => this.toggleIconsPanel() })),
                                        React.createElement("div", { style: { padding: '30px 6px 6px 6px' } }, icons.map(o => React.createElement("i", { key: o, className: o, style: { display: 'table-cell', padding: 10, fontSize: 20 }, onClick: () => {
                                                currentItem.icon = o;
                                                this.toggleIconsPanel();
                                                this.setState({ item: currentItem });
                                            } }))))))) : null,
                    React.createElement("div", { className: "form-group" },
                        React.createElement("label", { className: "col-sm-2 control-label" }, "\u94FE\u63A5*"),
                        React.createElement("div", { className: "col-sm-10" },
                            React.createElement("input", { name: "url", className: "form-control", style: { display: this.isCustomUrl() ? null : 'none' }, ref: (e) => {
                                    if (!e)
                                        return;
                                    e.value = currentItem.url || '';
                                    e.onchange = () => {
                                        currentItem.url = e.value;
                                    };
                                } }),
                            React.createElement("select", { className: "form-control", style: { display: this.isCustomUrl() ? 'none' : null }, ref: (e) => {
                                    if (!e)
                                        return;
                                    e.value = currentItem.url;
                                    e.onchange = () => {
                                        let option = e.options[e.selectedIndex];
                                        currentItem.url = option.value;
                                    };
                                } }, links.map((o, i) => React.createElement("option", { key: i, value: o.url }, o.text))))),
                    React.createElement("div", { className: "form-group" },
                        React.createElement("div", { className: "col-sm-offset-2 col-sm-10" },
                            React.createElement("input", { type: "checkbox", ref: (e) => {
                                    if (!e)
                                        return;
                                    e.value = currentItem.url || '';
                                    e.checked = this.isCustomUrl();
                                    e.onchange = () => {
                                        if (e.checked) {
                                            this.state.item.url = null;
                                            this.setState(this.state);
                                        }
                                        else {
                                            this.state.item.url = '';
                                            this.setState(this.state);
                                        }
                                    };
                                } }),
                            " \u81EA\u5B9A\u4E49\u94FE\u63A5"))));
        }
    }
});
